<template>
  <Tabbar class="home">
    <!-- <AppHeader>
      <div slot="leftText">楼房名称</div>
      <div slot="right">下载 搜索 筛选</div>
    </AppHeader>

    <AppHeader>
      公司名称
    </AppHeader>

    <AppHeader :showBack="false">
      <div slot="left">用户名</div>
      <div slot="right">退出登录</div>
    </AppHeader> -->

    <div class="header">
      <div class="logo"><img src="@/assets/logo.png" alt="" /></div>
      <div class="info">当前入驻：<span class="totals">1,000</span>家</div>
      <form action="" class="search">
        <input id="" type="text" name="" placeholder="请输入企业名称" />
      </form>
    </div>

    <div class="main">
      <Loading v-show="loading" />

      <template v-for="area in data">
        <section
          v-if="area.parkAreaBuildingList.length"
          :key="area.id"
          class="mod"
        >
          <header class="tit">
            {{ area.name }}
            （
            <span class="totals">
              {{ area.parkAreaBuildingList.length }}
            </span>
            ）
          </header>
          <ul class="list">
            <template v-for="building in area.parkAreaBuildingList">
              <router-link
                :key="building.id"
                :to="{
                  name: 'Buildings',
                  params: {
                    aid: area.id,
                    id: building.id
                  },
                  query: {
                    building_name: building.name,
                    company_count: building.enterpriseNum,
                    floor: building.floorNum
                  }
                }"
                tag="li"
              >
                <figure><img src="@/assets/img.jpg" alt="" /></figure>
                <div class="info">
                  <p class="name">{{ building.name }}</p>
                  <p class="totals">{{ building.enterpriseNum }}家</p>
                </div>
              </router-link>
            </template>
          </ul>
        </section>
      </template>
    </div>
  </Tabbar>
</template>

<script>
import { useFetch } from "../use/useFetch";

export default {
  name: "Home",
  setup() {
    const { data, loading, fetch } = useFetch("cedar-system/parkarea/allinfo");

    return {
      data,
      loading,
      fetch
    };
  }
};
</script>
